<template>
  <ChartComp :id="id?id:'fundExpend'"
    :message="fundExpendMessage" />
</template>

<script>
import { getFundOut } from '@/api/chart.js'
import ChartComp from '@/components/echart/charts.vue'
export default {
  components: {
    ChartComp
  },
  props: {
    id: {
      require: true,
      type: String,
      default: ''
    },
    year: {
      require: true,
      type: String,
      default: ''
    }
  },
  watch: {
    year: {
      handler() {
        this.initMessage()
      }
    },
    id: {
      handler() {
        this.initMessage()
      }
    },
    deep: true
  },
  data() {
    return {
      fundExpendMessage: {}
    }
  },
  created() {},
  mounted() {
    this.initMessage()
  },
  methods: {
    initMessage() {
      getFundOut({ year: this.year }).then(res => {
        console.log('[ res44444444 ] >', res)
        let xaxis = res?.data?.xaxis ?? []
        let projectData = res?.data?.projectData ?? []
        this.fundExpendMessage = {
          grid: {
            left: '20',
            right: '20',
            top: '10%',
            bottom: '20',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line'
            },
            textStyle: {
              color: '#fff'
            },
            className: 'LineChart-tooltip',
            extraCssText: `background-color: rgba(0, 21, 50, 0.8);
            color: #fff;
            border: 1px solid #214D87;
            border-color: #214D87;
            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
            border-radius: 4px;`,
            formatter: function (params) {
              var res =
                params[0].name +
                '<br/>' +
                '经费：' +
                params[0].value +
                '（万元）'
              return res
            }
          },
          xAxis: {
            type: 'category',
            data: xaxis,
            boundaryGap: true,
            axisTick: {
              alignWithLabel: true
            },
            splitLine: {
              show: false,
              alignWithLabel: true,
              lineStyle: {
                type: 'dashed',
                color: '#214D87'
              }
            },
            axisLabel: {
              color: '#7CB4FF',
              rotate: 45,
              // align: 'center', //标识中间显示
              formatter: function (params) {
                var newParamsName = '' // 最终拼接成的字符串
                var paramsNameNumber = params.length // 实际标签的个数
                var provideNumber = 8 // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  // 循环每一行,p表示行
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = '' // 表示每一次截取的字符串
                    var start = p * provideNumber // 开始截取的位置
                    var end = start + provideNumber // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1)
                      tempStr = params.substring(start, paramsNameNumber)
                    else tempStr = params.substring(start, end) + '\n' // 每一次拼接字符串并换行
                    newParamsName += tempStr // 最终拼成的字符串
                  }
                } else {
                  newParamsName = params // 将旧标签的值赋给新标签
                }
                return newParamsName
              }
            },
            axisLine: {
              lineStyle: {
                type: 'dashed',
                color: '#214D87'
              }
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#214D87'
              }
            },
            axisLabel: {
              color: '#7CB4FF'
            },
            boundaryGap: ['0%', '20%'],
            axisLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: '#214D87'
              }
            }
          },
          series: [
            {
              data: projectData,
              type: 'bar',
              showBackground: false,
              backgroundStyle: {
                color: '#08377B'
              },
              itemStyle: {
                color: () => {
                  // return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  //   { offset: 0, color: '#0085FF' },
                  //   { offset: 1, color: '#3ABDFF' }
                  // ])
                  return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#188df0' }
                  ])
                }
              },
              label: {
                //设置label显示
                show: true,
                position: 'top',
                distance: 10,
                fontSize: 14,
                color: '#779DCA'
              }
            }
          ]
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
